<template>
  <div class="content">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="操作类型">
        <el-select v-model="formInline.operateType" placeholder="请选择操作类型">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData.records" :stripe="true" border>
      <el-table-column prop="paidTime" label="交易时间" min-width="180" align="center" />
      <el-table-column label="类型" min-width="150" align="center">
        <template #default="scope">
          {{scope.row.operateType==0?"充值":"退款"}}
        </template>
      </el-table-column>
      <el-table-column prop="coin" label="平台币" min-width="200" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.operateType==0" type="success">+{{scope.row.coin}}</el-tag>
          <el-tag v-else type="danger">-{{scope.row.coin}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="充值明细" align="center" />
      <el-table-column prop="realName" label="用户" align="center" min-width="180" />
      <el-table-column prop="coinBalance" label="用户资产（平台币余额）" align="center" min-width="180" />
    </el-table>
    <pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-backtop :right="100" :bottom="100" />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  operateType: null,
});
let options = ref([
  { label: "充值", value: 0 },
  { label: "退款", value: 1 },
]);
let tableData = ref({});

onMounted(() => {
  search();
});
let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableData.value = await proxy.$apis.userCoinRecharge(formInline.value);
};
let init = () => {
  formInline.value = {
    pageNum: 1,
    pageSize: 10,
    operateType: null,
  };
  getInfo();
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
